<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="${ctxPath!}/plugins/layui/css/layui.css" media="all"/>
		<link rel="stylesheet" type="text/css" href="${ctxPath!}/css/fs.css" media="all"/>
		<script type="text/javascript" src="${ctxPath!}/plugins/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="${ctxPath!}/plugins/layui/layui.js"></script>
		<script type="text/javascript" src="${ctxPath!}/plugins/frame/js/fs.js?v=1.7.0"></script>
		<style type="text/css">
			body{padding: 10px 30px;}
			.hide{display:none}
		</style>
	</head>
	<body>
		<button class="layui-btn layui-btn-primary up-all">全部收起</button>
		<button class="layui-btn layui-btn-primary down-all">全部展开</button>
		
		<div class="test-tree-table" lay-filter="test1"></div>
		

		<script type="text/javascript">

			layui.use(['treetable','form'],function(){
				var data=[{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];
				var o = layui.$,treetable = layui.treetable;
				treetable.render({
					elem: '.test-tree-table',
					data: data,
					field: 'title',
					cols: [
						{
							field: 'title',
							title: '标题',
							width: '30%',
						},
						{
							field: 'id',
							title: 'ID',
							width: '20%',
						},
						{
							field: 'pid',
							title: '父ID',
							width: '20%',
						},
						{
							field: 'actions',
							title: '操作',
							width: '30%',
							data: [
								'<a lay-filter="add" href="1.html">添加</a>','<a lay-filter="edit">编辑</a>',
							],
						},
					]
				});
				
				treetable.on('treetable(test1)',function(data){
					console.dir(o(data.elem).html());
				})
				
				treetable.on('treetable(add)',function(data){
					console.dir(data);
				})
				
				treetable.on('treetable(edit)',function(data){
					console.dir(data);
				})
				
				o('.up-all').click(function(){
					treetable.all('up');
				})
				
				o('.down-all').click(function(){
					treetable.all('down');
				})
			})
		</script>
	</body>
</html>
